<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问卷管理</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="div">
    <b style="color: red; font-size: 20px;">问卷列表</b>
    <div style="float: right;">
        <el-button type="primary" @click="showAdd">添加问卷</el-button>
    </div>
    <el-table :data="tableData">
        <el-table-column prop="id" label="问卷id" ></el-table-column>
        <el-table-column prop="name" label="问卷名称" ></el-table-column>

        <el-table-column prop="level" label="级别"></el-table-column>
        <el-table-column prop="star" label="星级"></el-table-column>
        <el-table-column label="问卷封面" >
            <template slot-scope="scope">
                <img :src="scope.row.cover" style="width:100px;height:50px;"/>
            </template>
        </el-table-column>

        <el-table-column label="操作" >
            <template slot-scope="props">
                <el-button type="warning" @click="showEdit(props.row)">编辑</el-button>
                <el-button type="danger" @click="deleteQuestionnaire(props.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--
        分页组件
          @size-change： 当改变每页条数时触发的函数
          @current-change：当改变页码时触发的函数
          current-page ：默认的页码
          :page-sizes：每页条数选择框中显示的值
          :page-size : 默认的每页条数
          layout： 分页组件的布局
              total（总条数）, sizes(每页条数), prev（上一页）, pager(所有的页码), next(下一页), jumper（跳转页码）
          :total: 总条数
    -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[5,10,15,20]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>

    <!--
          :model="formData": 关联数据
          :rules: 关联校验规则
          ref： 在获取表单对象时使用
      -->
    <el-dialog title="添加问卷" :visible.sync="dialogTableVisible4add" @close="resetForm('addForm')">
        <el-form :model="formData"  ref="addForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="问卷名称">
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="问卷级别">
                <el-input v-model="formData.level"></el-input>
            </el-form-item>
            <el-form-item label="问卷星级" >
                <el-input v-model="formData.star" ></el-input>
            </el-form-item>

                <el-form-item label="问卷封面" :label-width="formLabelWidth" :required="trueFlag">
                    <el-row>
                        <el-col :span="12">
                            <div class="grid-content bg-purple">
                                <el-upload
                                        class="upload-demo"
                                        ref="upload"
                                        action="/upload"
                                        accept="image/jpeg,image/jpg,image/png"
                                        :auto-upload="true"
                                        :on-success="handleAvatarSuccess"
                                        list-type="picture">
                                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                 <!--<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
                                </el-upload>
                            </div>
                        </el-col>
                    </el-row>
                </el-form-item>


            <el-form-item align="right">
                <el-button type="primary" @click="saveQuestionnaire()">添加</el-button>
                <el-button @click="resetForm('addForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--
      &lt;!&ndash;
            :model="formData": 关联数据
            :rules: 关联校验规则
            ref： 在获取表单对象时使用
        &ndash;&gt;
    -->

    <el-dialog title="修改问卷信息" :visible.sync="dialogTableVisible4edit" @close="resetForm('editForm')">

        <el-form :model="editFormData"  ref="editForm" label-width="100px" class="demo-ruleForm">
            <el-input v-model="editFormData.id" type="hidden"></el-input>
            <el-form-item label="问卷名称">
                <el-input v-model="editFormData.name"></el-input>

            </el-form-item>
            <el-form-item label="问卷等级">
                <el-input v-model="editFormData.level"></el-input>
            </el-form-item>
            <el-form-item label="问卷星级" >
                <el-input v-model="editFormData.star" ></el-input>
            </el-form-item>
            <el-form-item label="问卷封面" >

                <el-upload
                        class="upload-demo"
                        ref="upload"
                        action="/upload"
                        accept="image/jpeg,image/jpg,image/png"
                        :data="editFormData"
                        :auto-upload="true"
                        :on-success="updateHandleAvatarSuccess"
                        list-type="picture"
                >
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <!--<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
                </el-upload>

            </el-form-item>

            <el-form-item align="right">
                <el-button type="warning" @click="updateQuestionnaire()">修改</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</body>
<script>
    new Vue({
        el: "#div",
        data: {
            dialogTableVisible4add: false,  //添加窗口显示状态
            dialogTableVisible4edit: false, //编辑窗口显示状态
            formData: {},//添加表单的数据
            editFormData: {},//编辑表单的数据
            tableData: [],//表格数据
            pagination: {
                currentPage: 1, //当前页
                pageSize: 5,    //每页显示条数
                total: 0        //总条数
            },
            options: []

        },
        methods: {
            findByPage(){
                axios.get("/questionnaire",{
                    params:{
                        num:this.pagination.currentPage,
                        pageSize:this.pagination.pageSize
                    }
                }).then(resp=>{
                    // console.log(resp.data);
                    // console.log(resp.data.pageNum)
                    //处理响应结果，把响应结果给tableData赋值
                    this.tableData = resp.data.records;
                    //给分页条赋值
                    // this.pagination.currentPage = resp.data.pageNum;
                    this.pagination.total = resp.data.total;
                    // this.pagination.pageSize = resp.data.pageSize;
                })
            },
            submitUpload(){
                this.$refs.upload.submit();
            },
            handleSizeChange(val) {//当每页显示多少条记录发生变化时，执行此方法中的代码
                //把每页显示多少条的信息赋值给pagination的pageSize
                this.pagination.pageSize = val;
                //改变之后，需要执行页面重写加载，查询所有线路
                this.findByPage();
            },
            handleCurrentChange(val) {//当前页发生变化时，执行此方法中的代码
                //把当前页信息赋值给pagination的currentPage
                this.pagination.currentPage = val;
                //改变之后重新加载线路列表
                this.findByPage();
            },
            showAdd(){
                this.dialogTableVisible4add = true;
            },
            showEdit(obj){
                this.dialogTableVisible4edit=true;
                //当点击编辑之后，发送ajax请求，根据id查询。并且使用双向绑定机制，给对话框中的输入框赋值
                axios.post("/showEdit",obj).then(resp=>{
                    //判断响应结果
                    if(resp.data != "error"){
                        //使用双向绑定，给编辑的表单对象赋值
                        this.editFormData = resp.data;
                    }
                })

            },
            updateQuestionnaire(){//修改功能
                //发送ajax请求
                axios.post("/updateQuestionnaire",this.editFormData).then(resp=>{
                    //判断响应结果
                    if(resp.data == "ok"){
                        this.submitUpload();
                        //提示
                        alert("修改成功");
                        //关闭窗口
                        this.dialogTableVisible4edit = false;
                        //再次加载分页列表
                        this.findByPage();
                    }
                })
            },
            saveQuestionnaire(){//实现添加功能
                //发送ajax请求

                axios.post("/saveQuestionnaire",this.formData).then(resp=>{

                    //处理响应结果
                    if(resp.data == "ok"){
                        this.submitUpload();
                        //提示
                        alert("添加成功");
                        //关闭添加窗口
                        this.dialogTableVisible4add = false;

                        //重新加载列表页面
                        this.findByPage();
                    }

                });

            },
            deleteQuestionnaire(obj){
                //提示确定删除吗
                if(window.confirm("确定删除吗？")){
                    //发送ajax请求，删除
                    axios.post("/deleteQuestionnaire",obj).then(resp=>{
                        //判断结果
                        if(resp.data=="ok"){
                            //提示信息
                            alert("删除成功");
                            //重新加载
                            this.findByPage();
                        }
                    });
                }
            },
            // findCategory(){
            //     //发送ajax请求，获取所有分类信息的json数据
            //     axios.get("/category?action=list").then(resp=>{
            //         //给下拉列表的选项赋值
            //         this.options = resp.data;
            //     })
            // },
            handleAvatarSuccess(res) {
                this.formData.cover = res.message;
            },

            updateHandleAvatarSuccess(res){
                this.editFormData.cover = res.message;
            },



        },
        created() {
            //页面加载时，获取线路的分页信息
            this.findByPage();
            //加载所有分类信息
           // this.findCategory();
        }
    });
</script>
</html>